﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucHomePage.ascx.cs" Inherits="UserControl_ucHomePage" %>


    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
        $(function() {
            var current = 1;

            var iterate = function() {
                var i = parseInt(current + 1);
                var lis = $('#rotmenu').children('li').size();
                if (i > lis) i = 1;
                display($('#rotmenu li:nth-child(' + i + ')'));
            }
            display($('#rotmenu li:first'));
            var slidetime = setInterval(iterate, 6000);

            $('#rotmenu li').bind('hover', function(e) {
                clearTimeout(slidetime);
                display($(this));
                e.preventDefault();
            });

            function display(elem) {
                var $this = elem;
                var repeat = false;
                if (current == parseInt($this.index() + 1))
                    repeat = true;

                if (!repeat)
                    $this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-10px' }, 300, function() {
                        $(this).animate({ 'opacity': '0.7' }, 700);
                    });

                current = parseInt($this.index() + 1);

                var elem = $('a', $this);

                elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);

                var info_elem = elem.next();
                $('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function() {
                    $('h1', $(this)).html(info_elem.find('.info_heading').html());
                    $(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
                });

                $('#rot1 .description').animate({ 'bottom': '-270px' }, 500, 'easeOutCirc', function() {
                    $('p', $(this)).html(info_elem.find('.info_description').html());
                    $(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
                })
                $('#rot1').prepend(
                    $('<img/>', {
                        style: 'opacity:0',
                        className: 'bg'
                    }).load(
                    function() {
                        $(this).animate({ 'opacity': '1' }, 600);
                        $('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function() {
                            $(this).remove();
                        });
                    }
                ).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '956').attr('height', '360')
                );
            }
        });
    </script>

<div id="content">
    <a class="back" href="#"></a>
    <div class="rotator">
        <ul id="rotmenu">
            <li><a runat="server" id="a_Customer"><asp:Label ID="lblCustomer" runat="server"></asp:Label></a>
                <div style="display: none;">
                    <div class="info_image">
                        1.png</div>
                    <div class="info_heading">
                        <asp:Label ID="lblCustomer_1" runat="server" /></div>
                    <div class="info_description">
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                        voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                        occaecati cupiditate non provident... <a href="gallery1.html" class="more2">Read more</a>
                    </div>
                </div>
            </li>
            <li><a href="SearchCustomer.aspx">CUSTOMER SEARCH</a>
                <div style="display: none;">
                    <div class="info_image">
                        5.png</div>
                    <div class="info_heading">
                        CUSTOMER SEARCH</div>
                    <div class="info_description">
                        voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                        occaecati cupiditate non provident... <a href="#" class="more2">Read more</a>
                    </div>
                </div>
            </li>
            <li><a href="FindJob.aspx">JOB SEARCH</a>
                <div style="display: none;">
                    <div class="info_image">
                        2.png</div>
                    <div class="info_heading">
                        JOB SEARCH</div>
                    <div class="info_description">
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui voluptatum deleniti
                        atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
                        non provident... <a href="#" class="more2">Read more</a>
                    </div>
                </div>
            </li>
            <li><a href="Booking.aspx">CASH PURCHASE</a>
                <div style="display: none;">
                    <div class="info_image">
                        3.png</div>
                    <div class="info_heading">
                        CASH PURCHASE</div>
                    <div class="info_description">
                        voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                        occaecati cupiditate non provident... <a href="#" class="more2">Read more</a>
                    </div>
                </div>
            </li>
            <li><a href="rot5.html">Applications</a>
                <div style="display: none;">
                    <div class="info_image">
                        4.png</div>
                    <div class="info_heading">
                        Working things</div>
                    <div class="info_description">
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                        voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                        occaecati cupiditate non provident... <a href="#" class="more2">Read more</a>
                    </div>
                </div>
            </li>
        </ul>
        <div id="rot1">
            <div class="heading">
                <h1>
                </h1>
            </div>
        </div>
    </div>
</div>
